<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航班查询系统</title>
    <!-- 引入Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入Element Plus CDN -->
    <link href="https://unpkg.com/element-plus@2.6.3/dist/index.css" rel="stylesheet">
    <script src="https://unpkg.com/element-plus@2.6.3/dist/index.full.js"></script>
    <!-- 引入Axios用于AJAX请求 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            padding: 30px;
        }
        h1 {
            text-align: center;
            color: #667eea;
            margin-bottom: 30px;
            font-size: 28px;
        }
        .search-form {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }
        .form-control {
            width: 100%;
            padding: 12px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        .form-control:focus {
            outline: none;
            border-color: #667eea;
        }
        .btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
            width: 100%;
        }
        .btn:hover {
            background: #5a67d8;
        }
        .results {
            margin-top: 30px;
        }
        .result-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            border-left: 5px solid #667eea;
        }
        .result-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #667eea;
        }
        .flight-info {
            padding: 10px;
            background: white;
            border-radius: 8px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .city {
            font-size: 18px;
            font-weight: 600;
        }
        .arrow {
            color: #667eea;
            font-size: 24px;
            margin: 0 15px;
        }
        .no-flight {
            text-align: center;
            padding: 30px;
            color: #666;
        }
        .transfer-info {
            font-size: 14px;
            color: #666;
            text-align: center;
            margin: 10px 0;
        }
        .loading {
            text-align: center;
            padding: 30px;
            color: #667eea;
        }
        .swap-btn {
            position: relative;
            background: #667eea;
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px auto;
            font-size: 20px;
            transition: background 0.3s, transform 0.3s;
        }
        
        .swap-btn:hover {
            background: #5a67d8;
            transform: rotate(180deg);
        }
        
        .route-type {
            background: #4caf50;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="container" id="app">
        <h1>✈️ 航班查询与中转规划系统</h1>
        
        <div class="search-form">
            <div class="form-group">
                <label for="from">出发城市</label>
                <div style="position: relative;">
                    <input 
                        type="text" 
                        id="from" 
                        class="form-control" 
                        v-model="fromCity" 
                        placeholder="请输入出发城市" 
                        list="cities"
                    >
                </div>
            </div>
            
            <button class="swap-btn" @click="swapCities" title="交换出发地和目的地">
                ⇄
            </button>
            
            <div class="form-group">
                <label for="to">到达城市</label>
                <input 
                    type="text" 
                    id="to" 
                    class="form-control" 
                    v-model="toCity" 
                    placeholder="请输入到达城市" 
                    list="cities"
                >
            </div>
            
            <button class="btn" @click="searchFlights">🔍 查询航班</button>
        </div>
        
        <datalist id="cities">
            <option v-for="city in allCities" :value="city"></option>
        </datalist>
        
        <div class="results" v-if="loading">
            <div class="loading">
                <el-icon><component is="el-icon-loading"></component></el-icon>
                <span>正在查询航班信息...</span>
            </div>
        </div>
        
        <div class="results" v-else-if="searchDone">
            <!-- 只查询出发地的结果 -->
            <div v-if="queryType === 'only_from'">
                <div class="result-title">📊 {{ resultTitle }}</div>
                <div v-if="destinations.length > 0">
                    <div class="result-card" v-for="(route, index) in destinations" :key="index">
                        <div class="flight-info">
                            <div class="city">{{ route.from }}</div>
                            <span class="arrow">⇒</span>
                            <div class="city">{{ route.to }}</div>
                            <span class="route-type">直达</span>
                        </div>
                    </div>
                    <div class="no-flight" style="margin-top: 20px; color: #666;">
                        共找到 {{ destinations.length }} 个可达目的地
                    </div>
                </div>
                <div v-else class="no-flight">
                    <p>抱歉，未能找到从 {{ fromCity }} 出发的任何航班</p>
                </div>
            </div>
            
            <!-- 只查询目的地的结果 -->
            <div v-else-if="queryType === 'only_to'">
                <div class="result-title">📊 {{ resultTitle }}</div>
                <div v-if="origins.length > 0">
                    <div class="result-card" v-for="(route, index) in origins" :key="index">
                        <div class="flight-info">
                            <div class="city">{{ route.from }}</div>
                            <span class="arrow">⇒</span>
                            <div class="city">{{ route.to }}</div>
                            <span class="route-type">直达</span>
                        </div>
                    </div>
                    <div class="no-flight" style="margin-top: 20px; color: #666;">
                        共找到 {{ origins.length }} 个可达出发地
                    </div>
                </div>
                <div v-else class="no-flight">
                    <p>抱歉，未能找到到达 {{ toCity }} 的任何航班</p>
                </div>
            </div>
            
            <!-- 查询直达和中转航班的结果 -->
            <div v-else-if="queryType === 'direct_transfer'">
                <!-- 直达航班结果 -->
                <div v-if="directFlights.length > 0">
                    <div class="result-title">✅ 发现直达航班</div>
                    <div v-for="(flight, index) in directFlights" :key="index" class="result-card">
                        <div class="transfer-info">
                            方案 {{ index + 1 }}: 直达航班
                        </div>
                        
                        <!-- 显示航线 -->
                        <div v-for="(segment, segIndex) in flight.segments" :key="segIndex" class="flight-info">
                            <div class="city">{{ segment[0] }}</div>
                            <span class="arrow">⇒</span>
                            <div class="city">{{ segment[1] }}</div>
                            <span class="route-type">直达</span>
                        </div>
                        
                        <!-- 显示总段数信息 -->
                        <div class="transfer-info" style="margin-top: 10px; font-weight: 600;">
                            总航段: {{ flight.transfer_count + 1 }}段 | 中转次数: {{ flight.transfer_count }}次
                        </div>
                    </div>
                </div>
                
                <!-- 中转航班结果 -->
                <div v-if="transferFlights.length > 0">
                    <div class="result-title">🔄 为您找到中转方案 (最多2次中转)</div>
                    <div v-for="(route, index) in transferFlights" :key="index" class="result-card">
                        <!-- 1次中转方案 -->
                        <div v-if="route.transfer_count === 1" class="transfer-info">
                            方案 {{ index + 1 }}: 1次中转 - 通过 {{ route.transfer_cities[0] }}
                        </div>
                        <!-- 2次中转方案 -->
                        <div v-else-if="route.transfer_count === 2" class="transfer-info">
                            方案 {{ index + 1 }}: 2次中转 - 通过 {{ route.transfer_cities[0] }} 和 {{ route.transfer_cities[1] }}
                        </div>
                        
                        <!-- 显示每段航线 -->
                        <div v-for="(segment, segIndex) in route.segments" :key="segIndex" class="flight-info">
                            <div class="city">{{ segment[0] }}</div>
                            <span class="arrow">⇒</span>
                            <div class="city">{{ segment[1] }}</div>
                            <span class="route-type">段 {{ segIndex + 1 }}</span>
                        </div>
                        
                        <!-- 显示总段数信息 -->
                        <div class="transfer-info" style="margin-top: 10px; font-weight: 600;">
                            总航段: {{ route.transfer_count + 1 }}段 | 中转次数: {{ route.transfer_count }}次
                        </div>
                    </div>
                </div>
                
                <!-- 无航班结果 -->
                <div v-if="directFlights.length === 0 && transferFlights.length === 0" class="no-flight">
                    <p>抱歉，未能找到从 {{ fromCity }} 到 {{ toCity }} 的航班或中转方案</p>
                    <p>请检查城市名称是否正确，或尝试其他城市</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    fromCity: '',
                    toCity: '',
                    allCities: [],
                    loading: false,
                    searchDone: false,
                    queryType: '', // 'direct_transfer', 'only_from', 'only_to'
                    directFlights: [],
                    transferFlights: [],
                    destinations: [],
                    origins: [],
                    resultTitle: ''
                };
            },
            mounted() {
                // 页面加载时获取所有城市列表
                this.fetchAllCities();
            },
            methods: {
                // 获取所有城市列表
                async fetchAllCities() {
                    try {
                        const response = await axios.get('flight_api.php?action=all_cities');
                        if (response.data.cities) {
                            this.allCities = response.data.cities;
                        }
                    } catch (error) {
                        console.error('获取城市列表失败:', error);
                        // 如果API调用失败，使用备用数据（简化版）
                        this.allCities = ['重庆', '哈尔滨', '吕梁', '西安', '成都', '北京', '上海'];
                    }
                },
                // 搜索航班
                async searchFlights() {
                    // 重置结果
                    this.searchDone = false;
                    this.directFlights = [];
                    this.transferFlights = [];
                    this.destinations = [];
                    this.origins = [];
                    this.resultTitle = '';
                    
                    // 验证输入 - 现在允许只输入一个城市
                    if (!this.fromCity && !this.toCity) {
                        this.$notify.error({
                            title: '输入错误',
                            message: '请至少输入出发城市或到达城市'
                        });
                        return;
                    }
                    
                    // 如果出发地和目的地都输入了且相同
                    if (this.fromCity && this.toCity && this.fromCity === this.toCity) {
                        this.$notify.error({
                            title: '输入错误',
                            message: '出发城市和到达城市不能相同'
                        });
                        return;
                    }
                    
                    this.loading = true;
                    
                    try {
                        // 调用后端API搜索航班
                        const response = await axios.get('flight_api.php', {
                            params: {
                                action: 'search_flights',
                                from: this.fromCity,
                                to: this.toCity
                            }
                        });
                        
                        if (response.data.error) {
                            this.$notify.error({
                                title: '查询失败',
                                message: response.data.error
                            });
                            return;
                        }
                        
                        // 确定查询类型并设置相应结果
                        if (this.fromCity && !this.toCity) {
                            // 只查询出发地
                            this.queryType = 'only_from';
                            this.destinations = response.data.destinations || [];
                            this.resultTitle = `从 ${this.fromCity} 出发的所有可达目的地`;
                        } else if (!this.fromCity && this.toCity) {
                            // 只查询目的地
                            this.queryType = 'only_to';
                            this.origins = response.data.origins || [];
                            this.resultTitle = `所有可以到达 ${this.toCity} 的出发地`;
                        } else {
                            // 查询直达和中转航班
                            this.queryType = 'direct_transfer';
                            this.directFlights = response.data.direct_flights || [];
                            this.transferFlights = response.data.transfer_flights || [];
                        }
                        
                        this.searchDone = true;
                    } catch (error) {
                        console.error('搜索航班失败:', error);
                        this.$notify.error({
                            title: '网络错误',
                            message: '无法连接到服务器，请稍后重试'
                        });
                    } finally {
                        this.loading = false;
                    }
                },
                // 交换出发地和目的地
                swapCities() {
                    const temp = this.fromCity;
                    this.fromCity = this.toCity;
                    this.toCity = temp;
                }
            }
        });
        
        // 注册Element Plus
        app.use(ElementPlus);
        
        // 挂载应用
        app.mount('#app');
    </script>
</body>
</html>